<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>首页</title>
</head>
<body>
	<jsp:include page="navigation.jsp"></jsp:include>
	<div class="container" style="margin-left: 190px;">
		<div class="topbar-inner">
			<div class="myhead">
				<span class="crumb-name">编辑类别</span>
			</div>
		</div>
		<form action="eventTypeEditor" method="post">
			<div style="margin: 20px 20px 20px 20px; text-align: center;">
				<input type="hidden" value="${info.id }" name="id" />
				<table class="table table-bordered">
					<tbody>
						<tr>
							<td width="180px"><span style="float: right">名字：</span></td>
							<td>
								<div style="width: 100%;">
									<input class="form-control" type="text" name="type_name" style="float: left;" value="${ info.type_name }" />
								</div>
							</td>
						</tr>
						<tr>
							<td><span style="float: right">标题：</span></td>
							<td>
								<div id="title_json_div" style="float: left;">
									<c:if test="${not empty title_list }">
										<c:forEach items="${title_list }" var="t" varStatus="ts">
											<div id="title_has_${ts.index }" style="height: 38px;">
												<input class="form-control" type="text" name="title_json" style="float: left;" value="${ t }" />
												<button type="button" class="btn btn-danger" style="margin-left: 10px;" onclick="removeHasTitle(${ts.index })">删除</button>
											</div>
										</c:forEach>
									</c:if>
									<div id="title_new_0" style="height: 38px;">
										<input class="form-control" type="text" name="title_json" style="float: left;" value="" />
										<button type="button" class="btn btn-primary" id="title_new_button_0" style="margin-left: 10px;" onclick="addNewTitle(0)">添加</button>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td><span style="float: right">简介：</span></td>
							<td>
								<div id="intro_json_div" style="float: left;">
									<c:if test="${not empty intro_list }">
										<c:forEach items="${intro_list }" var="i" varStatus="is">
											<div id="intro_has_${is.index }" style="height: 38px;">
												<input class="form-control" type="text" name="intro_json" style="float: left;" value="${ i }" />
												<button type="button" class="btn btn-danger" style="margin-left: 10px;" onclick="removeHasIntro(${is.index })">删除</button>
											</div>
										</c:forEach>
									</c:if>
									<div id="intro_new_0" style="height: 38px;">
										<input class="form-control" type="text" name="intro_json" style="float: left;" value="" />
										<button type="button" class="btn btn-primary" id="intro_new_button_0" style="margin-left: 10px;" onclick="addNewIntro(0)">添加</button>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div style="float: right">
									<input class="form-control" type="submit" value="确定" />
								</div>
							</td>
							<td><div style="float: left">
									<a href="eventtypeinfo"><input type="button" value="取消" class="form-control"></input></a>
								</div></td>
						</tr>
					</tbody>
				</table>
			</div>
		</form>
	</div>
	<script type="text/javascript">
    $(function() {
        $('.submenu_1_2').addClass('submenu_native');
    });

    function removeHasTitle(index){
        $("#title_has_"+index).remove();
    }
    
    function removeHasIntro(index){
        $("#intro_has_"+index).remove();
    }
    
    function addNewTitle(index){
        var nextIndex = parseInt(index)+1;
        var html = '';
        html += '<div id="title_new_'+nextIndex+'" style="height: 38px;">';
        html += '<input class="form-control" type="text" name="title_json" style="float: left;" value="" />';
        html += '<button type="button" class="btn btn-primary" style="margin-left: 10px;" id="title_new_button_'+nextIndex+'" onclick="addNewTitle('+nextIndex+')">添加</button>';
        html += '</div>';
        $("#title_new_button_"+index).remove();
        $("#title_new_"+index).append('<button type="button" class="btn btn-danger" style="margin-left: 10px;" onclick="removeNewTitle('+index+')">删除</button>');
        $("#title_json_div").append(html);
    }
    
    function removeNewTitle(index){
        $("#title_new_"+index).remove();
    }
    
    function addNewIntro(index){
        var nextIndex = parseInt(index)+1;
        var html = '';
        html += '<div id="intro_new_'+nextIndex+'" style="height: 38px;">';
        html += '<input class="form-control" type="text" name="intro_json" style="float: left;" value="" />';
        html += '<button type="button" class="btn btn-primary" style="margin-left: 10px;" id="intro_new_button_'+nextIndex+'" onclick="addNewIntro('+nextIndex+')">添加</button>';
        html += '</div>';
        $("#intro_new_button_"+index).remove();
        $("#intro_new_"+index).append('<button type="button" class="btn btn-danger" style="margin-left: 10px;" onclick="removeNewIntro('+index+')">删除</button>');
        $("#intro_json_div").append(html);
    }
    
    function removeNewIntro(index){
        $("#intro_new_"+index).remove();
    }
</script>
</body>
</html>